<template>
  <div class="title">新建连接</div>
  <div class="query">
    <div>
      <RadioGroup v-model:value="queryParams.showWitch" button-style="solid">
        <RadioButton value="group">分组</RadioButton>
        <RadioButton value="list">列表</RadioButton>
      </RadioGroup>
    </div>
    <div>
      <InputSearch
        v-model:value="queryParams.search"
        placeholder="名称/编码/IP/标签"
        style="width: 260px"
        @search="onSearch"
      />
    </div>
  </div>
  <div class="title system">业务系统</div>
  <div class="list_container">
    <div class="group" :style="groupStyle">
      <div class="group_container" v-if="queryParams.showWitch === 'group'">
        <Tree
          :tree-data="groupOptions"
          defaultExpandAll
          v-model:selectedKeys="_selectedKeys"
          :fieldNames="{
            children: 'children',
            title: 'groupName',
            key: 'groupId',
          }"
        >
        </Tree>
      </div>
    </div>
    <div class="list">
      <div
        v-for="item in 100"
        :class="['list_item', { active: isActive === item }]"
        :key="item"
        @click="isActive = item"
      >
        <Row>
          <Col :span="7">
            <div class="unified">数据库1234d</div>
          </Col>
          <Col :span="7">
            <div class="unified">101.43.172.43</div>
          </Col>
          <Col :span="10">
            <div class="label unified">
              <Tag color="#810000" class="tag">sftp</Tag>
              <Tag color="#165dff" class="tag">ntp</Tag>
              <Tag color="#24d78c" class="tag">sftp</Tag>
            </div>
            <div class="ssh">
              <Tooltip placement="top">
                <template #title>打开SSH</template>
                <Button
                  :icon="h(LinkOutlined)"
                  type="link"
                  @click="onOpen(item)"
                ></Button>
              </Tooltip>
            </div>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, h, ref } from 'vue';
import {
  DesktopOutlined,
  LinkOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue';
import {
  Button,
  Col,
  InputSearch,
  RadioButton,
  RadioGroup,
  Row,
  Tag,
  Tooltip,
  Tree,
} from 'ant-design-vue';
import { groupSelectList } from '../api';

const props = defineProps({
  shellList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['open']);

const queryParams = ref({
  showWitch: 'group',
  search: '',
});

const isActive = ref();
const groupOptions = ref([]);
const _selectedKeys = ref([]);
const getInfo = async () => {
  const group = await groupSelectList();
  groupOptions.value = group.data;
};
getInfo();

const onSearch = () => {};
// import Xterm from '@/components/xterm/index.vue';

const groupStyle = computed(() => {
  return {
    width: queryParams.value.showWitch === 'group' ? '400px' : 0,
    marginRight: queryParams.value.showWitch === 'group' ? '20px' : 0,
  };
});

const onOpen = (item) => {
  emit('open', item);
};
</script>

<style scoped lang="scss">
.title {
  font-weight: 700;
  padding: 15px;
  &.system {
    margin-top: 15px;
    border-top: 1px solid #ccc;
  }
}
.query {
  display: flex;
  justify-content: space-between;
  :deep(.ant-radio-button-wrapper) {
    width: 130px;

    text-align: center;
  }
}
.list_container {
  height: calc(100% - 150px);
  display: flex;
  justify-content: space-between;
  .list,
  .group {
    height: 100%;
  }
  .group_container {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 20px;
  }
  .list {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 20px;
    overflow-y: auto;
    &_item {
      padding: 20px 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 15px;
      .unified {
        line-height: 32px;
      }
      .label {
        height: 32px;
        .tag {
          margin-right: 15px;
        }
      }
      &.active {
        background-color: #777;
      }
      .ssh {
        display: none;
        width: 160px;
        text-align: center;
      }
      &:hover {
        .ssh {
          display: block;
        }
        .label {
          display: none;
        }
      }
    }
  }
  .group {
    transition: all 0.3s;
  }
}
</style>
